@duration: 312ms;

.slideout-animation--enabled {
  opacity: 0;
  transition: opacity @duration;
  will-change: opacity;

  &.slideout-is--visible {
    opacity: 1;
    transition-duration: @duration / 2;
    transition-timing-function: ease-out;

    > .slideout-panel {
      transition-duration: @duration / 2;
    }
  }

  > .slideout-panel {
    will-change: transform;
    transition: transform @duration, width @duration, height @duration;

    > .slideout-header {
      .slideout-btn--close, .slideout-btn--fill {
        transition: border-color @duration;
      }
    }

    > .slideout-resize--handle {
      transition: background-color @duration;
    }
  }
}
